<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">动态</a></li>
        <li>
            <a href="#">项目<span class="arrow"></span></a>
            <ul class="sub_menu">
                <li><a href="#">子菜单1111111111111</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">更多<span class="arrow"></span></a>
            <ul class="sub_menu">
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
            </ul>
        </li>
    </ul>

    <ul class="menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">动态</a></li>
        <li>
            <a href="#">项目<span class="arrow"></span></a>
            <ul class="sub_menu_2">
                <li><a href="#">子菜单1111111111111</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">更多<span class="arrow"></span></a>
            <ul class="sub_menu_2">
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
            </ul>
        </li>
    </ul>
    <div style="margin: 16px;">
        <p>在 JDK 1.5 之前共享对象的协调机制只有 synchronized 和 volatile，在 JDK 1.5 中增加了新的机制 ReentrantLock</p>
    </div>
</body>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .menu {
        margin: 10px;
        list-style: none;
        display: flex;
        justify-content: center;
    }

    .menu li {
        position: relative;
        color: #3280fc;
    }

    .menu li:hover {
        color: white;
        background-color: #3280fc;
    }

    .menu .arrow {
        display: inline-block;
        margin-bottom: 2px;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 4px solid;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        opacity: .5;
    }

    .menu a {
        display: block;
        padding: 8px 16px;
        word-break:keep-all;
        color: inherit;
        text-decoration: none;
    }

    .menu > li  {
        border: 1px solid #3280fc;
        border-right-width: 0;
        flex-shrink: 0;
    }

    .menu > li:first-child  {
        border-radius: 6px 0 0 6px;
    }

    .menu > li:last-child  {
        border-radius: 0 6px 6px 0;
        border-right-width: 1px;
    }

    .sub_menu > li, .sub_menu_2 > li {
        border-radius: 6px;
    }

    /** 
     * 方式一：通过display和animation实现二级菜单弹出动画（translation动画不支持display属性）
    **/
    .sub_menu {
        background-color: white;
        padding: 6px;
        list-style: none;
        display: none;
        position: absolute;
        border-radius: 6px;
        border: 1px solid lightgray;
        box-shadow: 2px 2px 4px 0 lightgray;
        z-index: 9999;
        overflow: hidden;
    }

    .menu > li:hover > .sub_menu {
        display: block;
        animation: 0.4s anim ease-in-out 0s forwards;
        transform-origin: left top;
    }

    @keyframes anim{
        from{
            top: 80%;
            max-height: 0;
        }
        to{
            top: 100%;
            max-height: 160px;
        }
    }

    /** 
     * 方式二：通过visibility和transition实现二级菜单弹出动画
    **/
    .sub_menu_2 {
        background-color: white;
        padding: 6px;
        list-style: none;
        visibility: hidden;
        position: absolute;
        border-radius: 6px;
        border: 1px solid lightgray;
        box-shadow: 2px 2px 4px 0 lightgray;
        z-index: 9999;
        overflow: hidden;
        top: 80%;
        max-height: 0;
    }

    .menu > li:hover > .sub_menu_2 {
        visibility: visible;
        /** transition属性写在:hover处，不然鼠标移开二级菜单隐藏时 **/
        transition: all 0.4s 0.2s ease-in-out;
        top: 100%;
        max-height: 160px;
    }
</style>

</html>